tangled.org
Monorepo for Tangled
tangled.org
1<script lang="ts">
2 import { page } from "$app/state";
3 import { setContext } from "svelte";
4 import { createProfileCounts, PROFILE_COUNTS_KEY } from "$lib/components/profile/counts.svelte";
5 import EmptyState from "$lib/components/profile/EmptyState.svelte";
6 import ProfileCard from "$lib/components/profile/ProfileCard.svelte";
7 import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte";
8
9 let { children, data } = $props();
10
11 const profileCounts = createProfileCounts(
12 () => data.identity.did,
13 () => data.counts
14 );
15 setContext(PROFILE_COUNTS_KEY, profileCounts);
16 const counts = $derived(profileCounts.value);
17 const tabParam = $derived(page.url.searchParams.get("tab") ?? "overview");
18 const activeTab = $derived(
19 ["repos", "starred", "strings", "vouches"].includes(tabParam) ? tabParam : "overview"
20 );
21</script>
22
23<svelte:head>
24 <title>{data.identity.handle} · Tangled</title>
25</svelte:head>
26
27<section class="mx-auto w-full max-w-screen-lg py-6">
28 {#if data.notJoined}
29 <EmptyState message={`${data.identity.handle} hasn't joined Tangled yet.`} />
30 {:else}
31 <ProfileTabs handle={data.identity.handle} active={activeTab} {counts} />
32 <div class="grid rounded bg-background-default shadow-sm md:grid-cols-11 md:gap-4 md:p-6">
33 <aside class="p-6 md:col-span-3 md:p-0">
34 <ProfileCard
35 identity={data.identity}
36 profile={data.profile}
37 followers={counts.followers}
38 following={counts.following}
39 viewerFollowRkey={data.viewerFollowRkey}
40 />
41 </aside>
42 <div class="min-w-0 border-t border-border-default p-6 md:col-span-8 md:border-t-0 md:p-0">
43 {@render children()}
44 </div>
45 </div>
46 {/if}
47</section>